<template>
  <div>
    <el-form
      :inline="false"
      label-width="100px"
      size="small"
      label-position="right"
    >
      <el-form-item label="节点类型">
        <el-input
          v-model="formData.type"
          style="width: 90%"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="节点ID">
        <el-input
          v-model="formData.id"
          style="width: 90%"
          @input="updateId"
        ></el-input>
      </el-form-item>
      <el-form-item label="节点名称">
        <el-input
          v-model="formData.name"
          style="width: 90%"
          @input="updateName"
        ></el-input>
      </el-form-item>

      <!--usertask-->
      <el-col :span="12" v-if="formData.type == 'bpmn:UserTask'">
        <el-form-item label="审批类型">
          <el-select
            clearable
            filterable
            v-model="formData.approvetype"
            style="width: 150px"
            @change="approvetypeChanges"
          >
            <el-option
              v-for="item in approveTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.type == 'bpmn:UserTask'">
        <el-form-item label="是否会签">
          <el-select
            clearable
            v-model="formData.multiinstance_type"
            style="width: 150px"
            @change="multiinstance_typeChange"
          >
            <el-option value="1" label="是"></el-option>
            <el-option value="0" label="否"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col
        :span="12"
        v-if="formData.type == 'bpmn:UserTask' && formData.approvetype == '4'"
      >
        <el-form-item label="所属机构：">
          <el-cascader
            ref="searchOrgTree"
            clearable
            filterable
            :disabled="!(formData.approvetype == '4')"
            :options="orgList"
            v-model="formData.approveorgancode"
            :props="{
              multiple: true,
              checkStrictly: true,
              emitPath: false,
              value: 'orgCode',
              label: 'orgName',
              children: 'children',
            }"
            :show-all-levels="false"
            style="width: 150px"
            @change="searchOrgHandle"
          ></el-cascader>
        </el-form-item>
      </el-col>
      <el-col
        :span="12"
        v-if="
          formData.type == 'bpmn:UserTask' &&
          formData.approvetype != '1' &&
          formData.approvetype != '5' &&
          formData.approvetype
        "
      >
        <el-form-item label="角色">
          <el-select
            clearable
            ref="mulApproveRoleCode"
            multiple
            filterable
            v-model="formData.approverolecode"
            style="width: 150px"
            @change="approverolecodeChange"
            :disabled="
              !(formData.approvetype == '2') &&
              !(formData.approvetype == '3') &&
              !(formData.approvetype == '4') &&
              !(formData.approvetype == '6') &&
              !(formData.approvetype == '7')
            "
          >
            <el-option
              v-for="item in roleList"
              :key="item.roleCode"
              :label="item.roleName"
              :value="item.roleCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col
        :span="12"
        v-if="formData.type == 'bpmn:UserTask' && formData.approvetype == '5'"
      >
        <el-form-item label="用户">
          <el-select
            clearable
            ref="mulApproveUserName"
            multiple
            filterable
            :disabled="!(formData.approvetype == '5')"
            v-model="formData.approveusername"
            style="width: 150px"
            @change="approveusernameChange"
          >
            <el-option
              v-for="item in userList"
              :key="item.userName"
              :label="item.userName"
              :value="item.userName"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col
        :span="12"
        v-if="
          formData.type == 'bpmn:UserTask' && formData.multiinstance_type == '1'
        "
      >
        <el-form-item label="投票规则">
          <el-select
            clearable
            v-model="formData.votetype"
            style="width: 150px"
            @change="voteRuleChange"
            :disabled="!(formData.multiinstance_type == '1')"
          >
            <el-option
              v-for="item in voteRuleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col
        :span="12"
        v-if="
          formData.type == 'bpmn:UserTask' && formData.multiinstance_type == '0'
        "
      >
        <el-form-item label="回退规则">
          <el-select
            clearable
            v-model="formData.rollbackrule"
            style="width: 150px"
            @change="rollbackruleChange"
            :disabled="!(formData.multiinstance_type == '0')"
          >
            <el-option
              v-for="item in backruleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.type == 'bpmn:UserTask'">
        <el-form-item label="允许改派">
          <el-select
            clearable
            v-model="formData.consignable"
            style="width: 150px"
            @change="consignableChange"
          >
            <el-option value="1" label="允许"></el-option>
            <el-option value="0" label="不允许"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!--  -->
      <!-- 动态参数 -->
      <el-col :span="12" v-if="
            formData.type == 'bpmn:UserTask' ||
            formData.type == 'bpmn:SequenceFlow' ||
            formData.type == 'bpmn:ExclusiveGateway' ||
            formData.type == 'bpmn:StartEvent' ||
            formData.type == 'bpmn:EndEvent'
          ">
        <el-form-item
          label="动态参数值"
        >
          <el-select
            clearable
            filterable
            v-model="formData.dynavarvalue"
            style="width: 150px"
            @change="dynavarvalueChange"
          >
            <el-option
              v-for="item in dynaValueList"
              :key="item.itemId"
              :label="item.itemName"
              :value="item.itemId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.type != 'bpmn:Process' && formData.type">
        <el-form-item
          label="开始事件"
          
        >
          <el-select
            clearable
            v-if="formData.type == 'bpmn:StartEvent'"
            filterable
            v-model="formData.start_node_end_listener"
            style="width: 150px"
            @change="listenerStartChange"
          >
            <el-option
              v-for="item in startEventList"
              :key="item.uuid"
              :label="item.name"
              :value="item.uuid"
            >
            </el-option>
          </el-select>

          <el-select
            v-if="formData.type == 'bpmn:EndEvent'"
            filterable
            clearable
            v-model="formData.end_node_start_listener"
            style="width: 150px"
            @change="listenerStartChange"
          >
            <el-option
              v-for="item in endEventList"
              :key="item.uuid"
              :label="item.name"
              :value="item.uuid"
            >
            </el-option>
          </el-select>
          <el-select
            v-if="
              formData.type == 'bpmn:UserTask' ||
              formData.type == 'bpmn:SequenceFlow' ||
              formData.type == 'bpmn:ExclusiveGateway'
            "
            clearable
            filterable
            v-model="formData.task_start_listener"
            style="width: 150px"
            @change="listenerStartChange"
          >
            <el-option
              v-for="item in createEventList"
              :key="item.uuid"
              :label="item.name"
              :value="item.uuid"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <!--开始事件 -->
      <!--结束事件  -->
      <el-col :span="12" v-if="
            formData.type == 'bpmn:UserTask' ||
            formData.type == 'bpmn:SequenceFlow' ||
            formData.type == 'bpmn:ExclusiveGateway'
          ">
        <el-form-item
          label="结束事件"
        >
          <el-select
            clearable
            filterable
            v-model="formData.task_end_listener"
            style="width: 150px"
            @change="listenerEndChange"
          >
            <el-option
              v-for="item in completeEventList"
              :key="item.uuid"
              :label="item.name"
              :value="item.uuid"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <!--结束事件 -->

      <!-- 分支条件 暂时不需要此需求-->
      <el-col :span="24" v-if="formData.type == 'bpmn:SequenceFlow'">
        <el-form-item
          label="流转条件"
        >
          <el-input
            style="width: 90%"
            v-model="formData.conditionExpression"
            @input="updateSequenceFlow"
          ></el-input>
        </el-form-item>
      </el-col>
      <!-- 分支条件 -->
    </el-form>
  </div>
</template>

<script>
import { systemManage } from "@/api/index";
import { workflow } from "@/api/index";
export default {
  name: "NodePropertyPanel",
  data() {
    return {
      startEventList: [], // 流程开始监听器
      endEventList: [], // 流程结束监听器
      createEventList: [], // 节点开始监听器
      completeEventList: [], // 节点结束监听器
      bpmnData: {},
      searchOrgTip: "",
      orgList: [],
      roleList: [],
      userList: [],
      element: {},
      approveStatusList: [], // 审批状态
      backruleList: [], // 回退规则
      permitDelegateList: [], // 允许委派
      approveTypeList: [], // 审批类型
      deployStatusList: [], // 流程发布状态
      processStatusList: [], // 流程运行状态
      resultFlagList: [], // 审批结果
      voteRuleList: [], // 投票类型
      dynaValueList: [], // 动态参数字典项
    };
  },
  props: {
    modeler: {
      type: Object,
      required: true,
    },
    nodeElement: {
      type: Object,
      required: true,
    },
    formData: {
      type: Object,
      required: true,
    },
    details: {
      type: Object,
      required: true,
    },
  },
  watch: {
    nodeElement: {
      handler() {
        if (this.nodeElement.type == "bpmn:StartEvent") {
          this.updateName("开始");
        }
        if (this.nodeElement.type == "bpmn:EndEvent") {
          this.updateName("结束");
        }
      },
    },
  },
  mounted() {
    this.getAllDict();
  },
  methods: {
    dynaKeyChange(val) {
      let _self = this;
      this.dynaValueList = [];
      if (val == "") {
        this.formData.dynavarvalue = "";
        this.updateProperties({ dynavarvalue: "" });
        return;
      }
      // 调用字典类型
      let data = {
        typeId: val,
        page: 1,
        size: 999,
      };
      systemManage.dictItemQuery(data).then((res) => {
        if (res && res.code == 200) {
          this.dynaValueList = res.datas.rows;
          // 后台查出顺序乱的，排下序
          this.dynaValueList.sort((x, y) => {
            return x.sortNo - y.sortNo;
          });
        }
      });
    },
    updateProperties(properties) {
      this.modeler
        .get("modeling")
        .updateProperties(this.nodeElement, properties);
    },
    updateId(name) {
      this.updateProperties({ id: name });
    },
    // 动态参数值
    dynavarvalueChange(dynavarvalue) {
      this.updateProperties({ dynavarvalue: dynavarvalue });
    },
    updateName(name) {
      this.updateProperties({ name: name });
    },
    // 用户
    approveusernameChange(val) {
      let approveusername = val.join();
      this.updateProperties({ approveusername: approveusername });
      setTimeout(() => {
        this.$refs.mulApproveUserName.blur();
      }, 50);
    },
    // 审批类型
    approvetypeChange(approvetype) {
      this.modeler
        .get("modeling")
        .updateProperties(this.nodeElement, { approvetype: approvetype });
    },
    approvetypeChanges(approvetype) {
      this.modeler
        .get("modeling")
        .updateProperties(this.nodeElement, { approvetype: approvetype });
      (this.formData.approveorgancode = []),
        (this.formData.approverolecode = []),
        (this.formData.approveusername = []);
      this.modeler.get("modeling").updateProperties(this.nodeElement, {
        approveorgancode: this.formData.approveorgancode.join(),
      });
      this.modeler.get("modeling").updateProperties(this.nodeElement, {
        approverolecode: this.formData.approverolecode.join(),
      });

      this.modeler.get("modeling").updateProperties(this.nodeElement, {
        approveusername: this.formData.approveusername.join(),
      });
    },
    // 角色类型
    approverolecodeChange(val) {
      let approverolecode = val.join();
      this.updateProperties({ approverolecode: approverolecode });
      setTimeout(() => {
        this.$refs.mulApproveRoleCode.blur();
      }, 50);
    },
    // 是否会签
    multiinstance_typeChange(multiinstance_type) {
      this.updateProperties({
        multiinstance_type: multiinstance_type,
      });
      this.formData.votetype = "";
      this.updateProperties({ votetype: "" });
      this.formData.rollbackrule = "";
      this.updateProperties({ rollbackrule: "" });
    },
    // 投票规则
    voteRuleChange(votetype) {
      this.updateProperties({ votetype: votetype });
    },
    // 回退规则
    rollbackruleChange(rollbackrule) {
      this.updateProperties({ rollbackrule: rollbackrule });
    },
    // 允许改派
    consignableChange(consignable) {
      this.updateProperties({ consignable: consignable });
    },
    // 开始事件
    listenerStartChange(val) {
      if (this.formData.type == "bpmn:StartEvent") {
        this.updateProperties({ start_node_end_listener: val });
      }
      if (this.formData.type == "bpmn:EndEvent") {
        this.updateProperties({ end_node_start_listener: val });
      }
      if (
        this.formData.type == "bpmn:UserTask" ||
        this.formData.type == "bpmn:SequenceFlow" ||
        this.formData.type == "bpmn:ExclusiveGateway"
      ) {
        this.updateProperties({ task_start_listener: val });
      }
    },
    // 结束事件
    listenerEndChange(val) {
      this.updateProperties({ task_end_listener: val });
    },
    updateSequenceFlow(val) {
      let newCondition = this.modeler
        .get("moddle")
        .create("bpmn:FormalExpression", {
          body: val,
        });
      this.updateProperties({ conditionExpression: newCondition });
    },
    // 获取字典
    getAllDict() {
      // 获取机构
      this.getOrgList();
      // 获取用户
      this.getUserList();
      // 获取角色
      this.getRoleList();
      // 获取回退规则
      // 开始事件
      // 结束事件
      // 动态参数值
      // 审批状态
      this.$getDict("workflow_approve_status").then((res) => {
        if (res.code == 200) {
          this.approveStatusList = res.datas;
        }
      });
      // 回退规则
      this.$getDict("workflow_def_backrule").then((res) => {
        if (res.code == 200) {
          this.backruleList = res.datas;
        }
      });
      // 允许委派
      this.$getDict("workflow_def_permitDelegate").then((res) => {
        if (res.code == 200) {
          this.permitDelegateList = res.datas;
        }
      });
      // 审批类型
      this.$getDict("workflow_def_approveType").then((res) => {
        if (res.code == 200) {
          this.approveTypeList = res.datas;
        }
      });
      // 流程发布状态
      this.$getDict("workflow_deploy_status").then((res) => {
        if (res.code == 200) {
          this.deployStatusList = res.datas;
        }
      });
      // 流程运行状态
      this.$getDict("workflow_process_status").then((res) => {
        if (res.code == 200) {
          this.processStatusList = res.datas;
        }
      });
      // 审批结果
      this.$getDict("workflow_result_flag").then((res) => {
        if (res.code == 200) {
          this.resultFlagList = res.datas;
        }
      });
      // 投票类型
      this.$getDict("workflow_vote_rule").then((res) => {
        if (res.code == 200) {
          this.voteRuleList = res.datas;
        }
      });
      this.getListenerType();
    },
    getOrgList() {
      systemManage.getOrganTree().then((res) => {
        this.orgList = res;
      });
    },
    getListenerType() {
      workflow.listenerGetByType({ type: "start" }).then((res) => {
        this.startEventList = res.datas;
      });
      workflow.listenerGetByType({ type: "end" }).then((res) => {
        this.endEventList = res.datas;
      });
      workflow.listenerGetByType({ type: "create" }).then((res) => {
        this.createEventList = res.datas;
      });
      workflow.listenerGetByType({ type: "complete" }).then((res) => {
        this.completeEventList = res.datas;
      });
    },

    // 处理搜索机构框点击选中隐藏,鼠标悬停提示
    searchOrgHandle(val) {
      if (val != undefined) {
        let approveorgancode = val.join();
        this.updateProperties({
          approveorgancode: approveorgancode,
        });
        this.$refs.searchOrgTree.dropDownVisible = false;
      }
    },
    getUserList() {
      let data = {
        userName: "",
        orgId: "",
        roleId: "",
        page: 1,
        size: 999,
      };
      systemManage
        .queryUser(data)
        .then((res) => {
          if (res.code == 200) {
            this.userList = res.datas.rows;
          }
        })
        .catch((err) => {});
    },
    getRoleList() {
      let data = {
        roleCode: "",
        roleName: "",
        page: 1,
        size: 999,
      };
      systemManage
        .roleManageQuery(data)
        .then((res) => {
          if (res.code == 200) {
            this.roleList = res.datas.rows;
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
</style>
